import React from 'react';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import {
  Form,
  FormItem,
  Input,
  Select,
  DatePicker,
  Submit,
  Space,
  FormLayout,
  FormButtonGroup,
} from '@formily/antd-v5';

// 创建一个 SchemaField 组件
const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
    DatePicker,
  },
});

// 示例 Schema
const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      title: '姓名',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        placeholder: '请输入姓名',
      },
    },
    age: {
      type: 'number',
      title: '年龄',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        type: 'number',
        placeholder: '请输入年龄',
      },
    },
    gender: {
      type: 'string',
      title: '性别',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Select',
      enum: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
      ],
    },
    birthday: {
      type: 'string',
      title: '生日',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'DatePicker',
    },
  },
};

const SchemaForm = () => {
  // 创建 form 实例
  const form = createForm();

  // 表单提交处理
  const onSubmit = (values) => {
    console.log('表单值：', values);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onAutoSubmit={onSubmit}
      style={{ width: '600px', margin: '20px auto' }}
    >
      <FormLayout labelCol={6} wrapperCol={16}>
        <SchemaField schema={schema} />
        <FormButtonGroup.FormItem>
          <Submit block size="large">
            提交
          </Submit>
        </FormButtonGroup.FormItem>
      </FormLayout>
    </Form>
  );
};

export default SchemaForm; 